{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- import "/_libs/common" -}}
{{- import "./card_blocks" -}}
{{- import "./common" -}}
{{- textArch := .IsArchived ? "Remove from archive" : "Move to archive" -}}
{{- textFav := .IsMarked ? "Remove from favorites" : "Add to favorites" -}}

{{- _url := urlFor(`/bookmarks`, .ID) }}
{{- if !.Loaded -}}
  <turbo-frame id="bookmark-card-{{ .ID }}"
   data-controller="turbo-refresh"
   data-turbo-refresh-interval-value="2"
   data-turbo-refresh-on-value="[data-loading]"
   data-turbo-refresh-src-value="{{ urlFor(`/api/bookmarks`, .ID) }}">
  {{- yield card(isDeleted=false, isLoading=true) content -}}
    <div class="bookmark-card-top">
      {{- yield card_image(src=urlFor(`/assets/rnd`, checksum(.URL)) + ".svg",
                           width=256, height=160) -}}
    </div>
    <div class="bookmark-card-content">
      <div>{{- yield spinner() -}}</div>
      <p>Loading {{ .Site }}…</p>
    </div>
  {{- end -}}
  </turbo-frame>
{{- else -}}
  <turbo-frame id="bookmark-card-{{ .ID }}" {{ if .IsDeleted }}data-bookmark-deleted="true"{{ end }}>
  {{- yield card(isDeleted=.IsDeleted, isLoading=false) content -}}
    <a href="{{ _url }}" class="bookmark-card-top" data-turbo-frame="_top">
      {{- if .DocumentType == "photo" -}}
        {{- yield icon(name="o-photo") -}}
      {{- else if .DocumentType == "video" -}}
        {{- yield icon(name="o-video") -}}
      {{- end -}}

      {{ if isset(.Resources.thumbnail) -}}
        {{- yield card_image(src=.Resources.thumbnail.Src,
                             width=.Resources.thumbnail.Width,
                             height=.Resources.thumbnail.Height) -}}
      {{- else -}}
        {{- yield card_image(src=urlFor(`/assets/rnd`, checksum(.URL)) + ".svg",
                             width=256, height=144) -}}
      {{- end }}
    </a>

    <div class="bookmark-card-content">
      <h3><a href="{{ _url }}" data-turbo-frame="_top"
        dir="{{ default(.TextDirection, "ltr") }}"
      >{{ shortText(default(.Title, "untitled"), 90) }}</a></h3>

      <span class="bookmark-card-meta">
        {{- if isset(.Resources.icon) -}}
          <img loading="lazy" src="{{ .Resources.icon.Src }}" alt=""
           width="{{ .Resources.icon.Width }}" height="{{ .Resources.icon.Height }}">
        {{- end -}}
        <strong title="{{ .SiteName }}"
         dir="{{ default(.TextDirection, "ltr") }}">{{ shortText(.SiteName, 50) }}</strong>
        {{- if .ReadingTime() > 0 -}}
          <span> •&nbsp;{{ .ReadingTime() }}&nbsp;min</span>
        {{- end -}}
      </span>

      {{ if len(.Labels) -}}
      <ul>
      {{- range .Labels -}}
        <li><a href="{{ urlFor(`/bookmarks/labels`) }}/{{ url(.) }}">{{ . }}</a></li>
      {{- end -}}
      </ul>
      {{- end }}

      <div class="bookmark-card-actions">
        {{- if .IsDeleted -}}
          <div class="bookmark-card-deleted">
            <span>
              This bookmark will be removed in a few seconds.
            </span>
            <form action="{{ _url }}" method="post">
              {{ yield csrfField() }}
              <input type="hidden" name="cancel" value="1" />
              <input type="hidden" name="_to" value="{{ currentPath }}" />
              <button type="submit" name="is_deleted" value="0"
                data-controller="turbo-form"
                data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .ID) }}"
                data-turbo-form-method-value="patch">{{ yield icon(name="o-undo") }} Undo</button>
            </form>
          </div>
        {{- else -}}
          <form action="{{ _url }}" method="post"
          class="flex-grow"
          data-controller="turbo-form turbo-reload"
          data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .ID) }}"
          data-turbo-form-method-value="patch"
          data-turbo-reload-frame-id-value="bookmark-list">
            {{ yield csrfField() }}
            <input type="hidden" name="_to" value="{{ currentPath }}" />
            <button name="is_marked" value="{{ .IsMarked ? 0 : 1 }}"
              title="{{ textFav }}">
              {{ yield icon(name=(.IsMarked ? "o-favorite-on" : "o-favorite-off")) }}
            </button>
            <button name="is_archived" value="{{ .IsArchived ? 0 : 1 }}"
              title="{{ textArch }}">
              {{ yield icon(name=(.IsArchived ? "o-archive-on" : "o-archive-off")) }}
            </button>
          </form>

          <form action="{{ urlFor(`/bookmarks`, .ID, `delete`) }}" method="post">
            {{ yield csrfField() }}
            <input type="hidden" name="_to" value="{{ currentPath }}" />
            <button name="is_deleted" value="1"
              data-controller="turbo-form"
              data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .ID) }}"
              data-turbo-form-method-value="patch"
              title="Delete this bookmark">
              {{ yield icon(name="o-trash") }}
            </button>
          </form>
        {{- end -}}
      </div>
    </div>

  {* </div> *}
  {{- end -}}
  </turbo-frame>
{{ end -}}
